<template>
  <div class="page">
    <HeaderBar :fixed="true" :theme="theme" :active="'about'"/>
    <div class="page-main">
      <div class="banner">
        <img oncontextmenu="return false" :src="info.founder_photo" class="fit-img" alt="" />
        <div class="banner-inner">
          <div class="inner-main">
            <div class="founder-user wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">
              <div class="title">{{ info.founder_title }}</div>
              <div class="desc">{{ info.founder_job }}</div>
            </div>
            <div class="founder-content wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" v-html="info.founder_content"></div>
            <div class="sign-box wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s">
              <img oncontextmenu="return false" src="@/assets/images/sign.png" alt="" class="founder-sign">
            </div>
          </div>
        </div>
      </div>
      <div class="story-box">
        <img oncontextmenu="return false" :src="info.founder_story_photo" class="fit-img" alt="">
        <div class="story-inner">
          <div class="story-tag wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ info.founder_story_title }}</div>
          <div class="story-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">{{ info.founder_story_titles }}</div>
          <div class="story-line wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s"></div>
          <div class="story-content wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" v-html="info.founder_story_content"></div>
          <div class="story-btn flex-center hv-opacity wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.6s" @click="visible = true">
            <span class="label">探索更多</span>
            <i class="iconfont icon-arrow"></i>
          </div>
        </div>
      </div>
      <div class="love-box">
        <div class="love-hd">
          <div class="love-title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ info.founder_love_title }}</div>
          <div class="love-content wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s" v-html="info.founder_love_cotent"></div>
        </div>
        <div class="love-swiper-box">
          <div class="love-swiper swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item, index) in loveList" :key="index" >
                <div class="love-card hv-scale">
                  <img oncontextmenu="return false" :src="item.photo" class="photo fit-img">
                  <div class="love-inner">
                    <div class="title wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.3s">{{ item.title }}</div>
                    <div class="desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">{{ item.titles }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="love-box-ft flex-between">
          <div class="love-bar"></div>
          <div class="love-nav">
            <div class="prev-btn flex-center">
              <i class="iconfont icon-arrow_left"></i>
            </div>
            <div class="next-btn flex-center">
              <i class="iconfont icon-arrow"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="fdr-footer">
        <img oncontextmenu="return false" :src="info.founder_last_photo" class="fdr-footer-bg">
        <div class="fdr-footer-logo">
          <img oncontextmenu="return false" src="@/assets/images/big_logo.svg" alt="">
        </div>
        <div class="fdr-info">
          <div class="title">{{ info.founder_last_title }}</div>
          <div class="desc" v-html="info.founder_last_content"></div>
        </div>
      </div>
    </div>
    <FooterBar />
  </div>
  <transition name="fade" mode="out-in">
    <div class="popup fd-popup" v-if="visible">
      <div class="mask" @click="visible = false"></div>
      <div class="fd-popup-box">
        <div class="close-btn hv-opacity flex-center" @click="visible = false">
          <i class="iconfont icon-cross"></i>
        </div>
        <div class="fd-content" v-html="info.founder_story_desc"></div>
      </div>
      
    </div>
  </transition>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { formatText, hideLoading } from '../../utils/utils'
import { getFounderInfo,  getLoveList } from '@/api/about' 
import Swiper from 'swiper'
import { Mousewheel, Navigation, Scrollbar } from 'swiper/modules'
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/scrollbar';

import HeaderBar from '@/components/HeaderBar/index.vue'
import FooterBar from '@/components/FooterBar/index.vue'
import WOW from 'wow.js'


const theme = ref('transparent')
const info = ref({})
const loveList = ref([])
const visible = ref(false)
const founderContent = ref('')
let loveSwiper

onMounted(() => {
  loadData()
  window.addEventListener('scroll', (event) => {
    const scrollTop = window.scrollY
    if (scrollTop > 100) {
      theme.value = 'white'
    } else {
      theme.value = 'transparent'
    }
  });
  const wow = new WOW({
    // scrollContainer: 'body',
    offset: 50
  })
  wow.init()
});

const loadData = () => {
  getFounderInfo().then(res => {
    info.value = res.data.list
    info.value.founder_content = formatText(res.data.list.founder_content)
    info.value.founder_story_content = formatText(res.data.list.founder_story_content)
    info.value.founder_love_cotent = formatText(res.data.list.founder_love_cotent)
    info.value.founder_last_content = formatText(res.data.list.founder_last_content)
    hideLoading()
  })
  getLoveList().then(res => {
    loveList.value = res.data
    initSwiper()
  })
}

const initSwiper = () => {
  loveSwiper = new Swiper('.love-swiper', {
    modules: [Mousewheel, Navigation, Scrollbar],
    mousewheel: false,
    slidesPerView: 'auto',
    spaceBetween: 25,
    // slidesOffsetBefore: '4.2%',
    // slidesOffsetAfter: '4.2%',
    navigation: {
      nextEl: '.next-btn',
      prevEl: '.prev-btn',
    },
    scrollbar: {
      el: '.love-bar',
      draggable: true,
      dragSize: 100
    },
    on: {
      
    }
  })
}

</script>

<style lang="scss">
@use '@/assets/style/common.scss';
.page {
  width: 100%;
  height: 100%;
}
.banner {
  width: 100%;
  height: 52.08vw;
  position: relative;
}
.banner-inner {
  position: absolute;
  right: 0;
  top: 0;
  width: 41.78vw;
  height: 100%;
  z-index: 10;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(7.5rem /* 120/16 */);
  .inner-main {
    position: absolute;
    width: 26.5625vw;
    top: 52%;
    left: 46%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  .founder-user {
    display: flex;
    align-items: flex-end;
    .title {
      font-size: 45px;
      line-height: 1;
      color: #FFFFFF;
      font-weight: 500;
    }
    .desc {
      margin-left: .9375rem /* 15/16 */;
      font-size: 1.0625rem /* 17/16 */;
      line-height: 1.25rem /* 20/16 */;
      color: rgba(255,255,255,.85);
    }
  }
  .founder-content {
    margin-top: 2.5rem /* 40/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 2.5rem /* 40/16 */;
    color: #FFFFFF;
  }
  .sign-box {
    text-align: right;
    margin-top: 4.375rem /* 70/16 */;
  }
  .founder-sign {
    width: 10.4375rem /* 167/16 */;
  }
}
.story-box {
  position: relative;
  width: 100%;
  height: 49.48vw;
}
.story-inner {
  width: 48vw;
  position: absolute;
  left: 8.3333vw;
  top: 50%;
  transform: translateY(-50%);
  .story-tag {
    font-size: 1.375rem /* 22/16 */;
    line-height: 1;
    color: rgba(255,255,255,.7);
  }
  .story-title {
    margin-top: 1.875rem /* 30/16 */;
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    color: #FFFFFF;
    font-weight: 500;
  }
  .story-line {
    margin-top: 2.8125rem /* 45/16 */;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, #BBBBBB 0%, rgba(187, 187, 187, 0) 110%);
      
  }
  .story-content {
    margin-top: 1.875rem /* 30/16 */;
    font-size: 1.125rem /* 18/16 */;
    line-height: 2.625rem /* 42/16 */;
    color: rgba(255,255,255,.85);
  }
  .story-btn {
    margin-top: 3.75rem /* 60/16 */;
    width: 10rem /* 160/16 */;
    height: 3.25rem /* 52/16 */;
    background: #E50012;
    border-radius: 2px;
    .label {
      font-size: 1rem /* 16/16 */;
      color: #FFFFFF;
      line-height: 1;
    }
    .iconfont {
      font-size: 1rem /* 16/16 */;
      line-height: 1;
      color: #FFFFFF;
      margin-left: .125rem /* 2/16 */;
    }
  }
}

.love-box {
  padding: 7.1875rem /* 115/16 */ 0 6.25rem /* 100/16 */;
  background: #FFFFFF
}
.love-hd {
  width: 83.3333vw;
  margin: 0 auto;
  .love-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    color: #000000;
    font-weight: 600
  }
  .love-content {
    margin-top: 2.5rem /* 40/16 */;
    line-height: 2.625rem /* 42/16 */;
    font-size: 1.125rem /* 18/16 */;
    color: #595757;
  }
}
.love-swiper-box {
  margin-top: 3.4375rem /* 55/16 */;
}
.love-swiper {
  width: 100%;
  height: 31.5vw;
  .swiper-slide {
    width: 22.4vw;
    height: 31.5vw;
    &:first-child {
      margin-left: 8.3333vw;
    }
    &:last-child {
      margin-right: 8.3333vw;
    }
  }
}
.love-card {
  width: 100%;
  height: 31.5vw;
  position: relative;
  overflow: hidden;
  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.5) 100%);
  }
  .photo {
    border-radius: 2px;
    overflow: hidden;
  }
  .love-inner {
    position: absolute;
    bottom: 1.875rem /* 30/16 */;
    padding: 0 1.875rem /* 30/16 */;
    z-index: 10;
    .title {
      font-size: 1.375rem /* 22/16 */;
      line-height: 1;
      color: #FFFFFF;
      font-weight: 500;
    }
    .desc {
      margin-top: .9375rem /* 15/16 */;
      color: rgba(255,255,255,.85);
      font-size: .9375rem /* 15/16 */;
      line-height: 1;
    }
  }
}
.love-box-ft {
  margin: 3.4375rem /* 55/16 */ auto 0;
  width: 83.3333vw;
}
.love-bar {
  width: 27.1875rem /* 435/16 */;
  height: 2px;
  background: #F0F0F0;
  .swiper-scrollbar-drag {
    background: #E50012;
    height: 2px;
  }
}
.love-nav {
  display: flex;
  align-items: center;
  .next-btn, .prev-btn {
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    border-radius: 50%;
    background: #F2F2F2;
    cursor: pointer;
    &:hover {
      background: #E50012;
      .iconfont {
        color: #FFFFFF;
      }
    }
    .iconfont {
      font-size: 1.125rem /* 18/16 */;
      color: #000000;
    }
  }
  .next-btn {
    margin-left: 1.125rem /* 18/16 */;
  }
}
.fdr-footer {
  width: 100%;
  position: relative;
  .fdr-footer-bg {
    width: 100%;
  }
  .fdr-footer-logo {
    width: 15vw;
    position: absolute;
    left: 14.58vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
  }
  .fdr-info {
    position: absolute;
    right: 8.3333vw;
    top: 50%;
    transform: translateY(-50%);
    width: 36.458vw;
    z-index: 10;
    .title {
      font-size: 2.8125rem /* 45/16 */;
      font-weight: 500;
      color: #000000;
      line-height: 1;
    }
    .desc {
      margin-top: 2.5rem /* 40/16 */;
      font-size: 1.125rem /* 18/16 */;
      line-height: 2.625rem /* 42/16 */;
      color: #595757;
    }
  }
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 111;
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(0,0,0,.7);
    transition: all .3s ease-in-out;
    opacity: 1;
  }
  .fd-popup-box {
    width: 87.5rem /* 1400/16 */;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: .375rem /* 6/16 */;
    max-height: 92vh;
    overflow-y: auto;
    padding: 6.25rem /* 100/16 */ 5rem /* 80/16 */ 3.75rem /* 60/16 */;
    z-index: 10;
  }
  .fd-content {
    font-size: 1.125rem /* 18/16 */;
    font-weight: normal;
    line-height: 2.625rem /* 42/16 */;
    text-align: justify; /* 浏览器可能不支持 */
    letter-spacing: 0.02em;
    color: #595757;
    p, span {
      font-size: 1.125rem /* 18/16 */;
      font-weight: normal;
      line-height: 2.625rem /* 42/16 */;
      text-align: justify; /* 浏览器可能不支持 */
      letter-spacing: 0.02em;
      color: #595757
    }
    img {
      width: 100%;
    }
  }
  .close-btn {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 3.125rem /* 50/16 */;
    height: 3.125rem /* 50/16 */;
    z-index: 20;
    background: #333333;
    opacity: .75;
    border-radius: 50%;
    .icon-cross {
      color: #FFFFFF;
      font-size: 1.25rem /* 20/16 */;
    }
  }
}
</style> 